<template>
  <div>
    <el-calendar v-model="value">
      <template #date-cell="{ data }">
        <div>{{ formatDay(data) }}</div>
        <div style="height: 21px">{{ plans.includes(data.day) ? '已打卡 ✔' : '' }}</div>
        <el-button v-if="data.date >= today" :disabled="data.date < today || plans.includes(data.day)" type="primary" @click="toPlan(data)">打卡</el-button>
      </template>
    </el-calendar>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const plans = ref([])
const value = ref(new Date())
const today = ref(new Date(window.$utils.dayjs(new Date()).format('YYYY-MM-DD')))

const init = () => {
  window.$apis.getPlans().then((res) => {
    plans.value = res.data
  })
}

onMounted(() => {
  init()
})

const formatDay = (data) => {
  return window.$utils.dayjs(data.day).format('DD')
}

const toPlan = (data) => {
  if (plans.value.includes(data.day)) return
  plans.value.push(data.day)
  const params = {
    data: plans.value
  }
  window.$apis.updatePlans(params).finally(() => {
    init()
  })
}
</script>

<style scoped></style>
